<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>canvas</title>
    <style>
      #canvas {
        display: block;
        margin: 0 auto;
        border: 1px solid #eee;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="300"></canvas>
    <script>
      /** @type {HTMLCanvasElement} */
      let canvas = document.querySelector("#canvas");
      let ctx = canvas.getContext("2d");
      let pointX = ctx.canvas.width / 2;
      let pointY = ctx.canvas.height / 2;

      ctx.beginPath()
      ctx.moveTo(200,0)
      ctx.lineTo(200,300)
      ctx.stroke()

      ctx.beginPath()
      ctx.moveTo(0,150)
      ctx.lineTo(400,150)
      ctx.stroke()

      ctx.beginPath()
      let str = "hello canvas";
      ctx.font="30px Arial";
      ctx.fillStyle = 'red';
      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.fillText(str,pointX,pointY);
      ctx.strokeStyle = 'green'
      ctx.strokeText(str,0,100)
    </script>
  </body>
</html>
